<!DOCTYPE HTML>
<html>
 <head>
  <title> 会员列表</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" /> 
 </head>
 <body>
  
  <div class="container">

    <div class="row header">
      <p>会员列表</p>
       <span class="headBtn"><a  href="#">添加会员</a></span>
    </div>
    <fieldset>
        <div class="row fileborder">
          <form id="searchForm" class="form-horizontal span24">           
            <div class="row">
              <div class="control-group span8">
                <label class="control-label">标签名称：</label>
                <div class="controls" >
                  <select name="" id="" name="mode">
                    <option value=""></option>
                    <option value=""></option>
                  </select>
                </div>
              </div>   
              <div class="control-group span8">
                <label class="control-label">会员名称：</label>
                <div class="controls" >
                  <select name="" id="" name="mode">
                    <option value=""></option>
                    <option value=""></option>
                  </select>
                </div>
              </div>    
              <div class="control-group span8">
                <label class="control-label">会员等级：</label>
                <div class="controls" >
                  <select name="" id="" name="mode">
                    <option value=""></option>
                    <option value=""></option>
                  </select>
                </div>
              </div>                 
            </div>

            <div class="row">
              <div class="control-group span8">
                <label class="control-label">交易额：</label>
                <div class="controls">
                  <input type="text" class="myinput" name="">
                  <span> - </span>
                  <input type="text" class="myinput" name="">
                </div>
              </div>
              <div class="control-group span8">
                <label class="control-label">交易次数：</label>
                <div class="controls">
                  <input type="text" class="myinput" name="">
                  <span> - </span>
                  <input type="text" class="myinput" name="">
                </div>
              </div>
              
            </div>
            <div class="row">
              <div class="control-group span9">
                <label class="control-label">上次交易时间：</label>
                <div class="controls">
                   <input type="text" class=" calendar" name="startDate"><span> - </span><input name="endDate" type="text" class=" calendar">
                </div>
              </div>
              <div class="span3">
                 <span class="myspanBtn">搜索</span>
              </div>
            </div>
          </form>
        </div>
        <div class="row fileborder">
          <div class="ontrol-group span3" >
              <span id="issuePacket" class="myspanBtn">发红包</span>
          </div>
          <div class="ontrol-group span3" >
            <span id="issueCoupon" class="myspanBtn">发优惠券</span>
          </div>
          <div class="ontrol-group span5" >
              <select name="" id="" name="mode">
                <option value="" selected="selected">批量添加标签</option>
                <option value=""></option>
              </select>
          </div>
          <div class="ontrol-group span3" >
              <span id="batchRecharge" class="myspanBtn">批量充值</span>
          </div>
          <div class="ontrol-group span8" >
              <span class="myspanBtn"><a href="batchModify.html">批量修改</a></span>
          </div>
        </div>

        <div class="search-grid-container">
           <div id="grid"></div>
       </div>
       
     <!-- 此部分是发放优惠券弹出的提示框 -->
    <div class="bgg" style="display: none"></div>
     <div id="prompt_msg7" class="pop_main" style="display: none;">
         <div id="prompt_title" class="pop_title">发放优惠券</div>
          <div class="pop_content clearfix">
              <div class="pop_content01">
                <label for="">优惠券名称：</label>
                <input type="text">
              </div>
              <div class="pop_content01">
                <label for="">生成数量：</label>
                <input type="text">
              </div>
              <div class="pop_content01">
                <label for="">优惠金额：</label>
                <span class="btn_style_1">5元</span>
                <span class="btn_style_1">10元</span>
                <span class="btn_style_1">15元</span>
              </div>
              <div class="pop_content01">
                <label for="">有效期：</label>
                <input type="text" class=" calendar" name="startDate"><span> - </span><input name="endDate" type="text" class=" calendar">
              </div>
              <div class="pop_content01">
                <label for="">使用条件：</label>
                <span>满</span>
                <input type="text">
                <span>元起使用</span>
              </div>
          </div>
       <div class="clearfix twoBtn">
           <div id="dlg-sure7" class="btn_style_1 pop_btn1">确定</div>
           <div id="dlg-close7" class="btn_style_1 pop_btn2">取消</div>
       </div>
    </div><!-- 提示框结束 --> 

      <!-- 此部分是发放红包弹出的提示框 -->
     <div id="prompt_msg8" class="pop_main" style="display: none;">
          <div id="prompt_title" class="pop_title">发红包</div>
          <div class="pop_content clearfix">
              <div class="pop_content01">
                <label for="">红包名称：</label>
                <input type="text">
              </div>
              <div class="pop_content01">
                <label for="">发放人数：</label>
                <input type="text">
              </div>
              <div class="pop_content01">
                <label for="">红包金额：</label>
                <input type="text">
              </div>
              <div class="pop_content01">
                <label for="">有效期：</label>
                <input type="text" class=" calendar" name="startDate"><span> - </span><input name="endDate" type="text" class=" calendar">
              </div>
              <div class="pop_content01">
                <label for="">使用条件：</label>
                <span>满</span>
                <input type="text">
                <span>元起使用</span>
              </div>
          </div>
         <div class="clearfix twoBtn">
             <div id="dlg-sure8" class="btn_style_1 pop_btn1">确定</div>
             <div id="dlg-close8" class="btn_style_1 pop_btn2">取消</div>
         </div>
    </div><!-- 提示框结束 -->

      <!-- 此部分是批量充值弹出的提示框 -->
      <div id="prompt_msg10" class="pop_main" style="height:220px;display: none;">
         <div id="prompt_title" class="pop_title">批量充值</div>
          <div class="pop_content clearfix">
              <div class="pop_content01">
                <label for=""><input type="radio" name="recharge" />选定充值：</label>
                <input type="text">
              </div>
              <div class="pop_content01">
                <label for=""><input type="radio" name="recharge" />范围充值：</label>
                <input type="text"><span> - </span><input type="text">
              </div>
              <div class="pop_content01">
                <label for="">充值金额：</label>
                <input type="text">
              </div>
          </div>
           <div class="clearfix twoBtn">
               <div id="dlg-sure10" class="btn_style_1 pop_btn1">确定</div>
               <div id="dlg-close10" class="btn_style_1 pop_btn2">取消</div>
           </div>
        </div><!-- 提示框结束 -->
    </fieldset>
  </div>

  
 <script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="../assets/js/bui-min.js"></script>
  <script type="text/javascript" src="../assets/js/config-min.js"></script>
  <script type="text/javascript" src="../assets/js/myjs.js"></script> 
  <script type="text/javascript">
    BUI.use('common/page');
  </script>

<script type="text/javascript">
  BUI.use('common/search',function (Search) {
    
   
     var editing = new BUI.Grid.Plugins.DialogEditing({
        contentId : 'content', //设置隐藏的Dialog内容
        autoSave : true, //添加数据或者修改数据时，自动保存
        triggerCls : 'btn-edit'
      }),
      columns = [
          {title:'会员编号',dataIndex:'member-2-0',width:100},
          {title:'会员名称',dataIndex:'member-2-1',width:100},
         
          {title:'等级',dataIndex:'member-2-2',width:100},
         
          {title:'交易额',dataIndex:'member-2-3',width:100},
          {title:'交易次数',dataIndex:'member-2-4',width:100},
          {title:'平均订单金额',dataIndex:'member-2-5',width:100},
         
          {title:'上次订单时间',dataIndex:'member-2-6',width:100},
         
          {title:'操作',dataIndex:'',width:200,renderer : function(value,obj){
             
            var  editStr1 = '<span class="grid-command" >[添加标签]</span>',
                 editStr2 = '<span class="grid-command" ><a  href="memDetails.html">[查看]</a></span>',
              editStr3 = '<span class="grid-command"><a  href="tradeRecord.html">[交易记录]</a></span>';
            return  editStr1 + editStr2 + editStr3;
          }}
        ],
      store = Search.createStore('../data/goods03.json',{
        proxy : {
          save : { //也可以是一个字符串，那么增删改，都会往那么路径提交数据，同时附加参数saveType
            addUrl : '../data/add.json',
            updateUrl : '../data/edit.json',
            removeUrl : '../data/del.php'
          }/*,
          method : 'POST'*/
        },
        autoSync : true //保存数据后，自动更新
      }),
      gridCfg = Search.createGridCfg(columns,{
        tbar : {
          items : [
            // {text : '<i class="icon-plus"></i>新建',btnCls : 'button button-small',handler:addFunction},
            // {text : '<i class="icon-edit"></i>编辑',btnCls : 'button button-small',handler:function(){alert('编辑');}},
            {text : '<i class="icon-remove"></i>删除',btnCls : 'button button-small',handler : delFunction}
          ]
        },
        plugins : [editing,BUI.Grid.Plugins.CheckSelection,BUI.Grid.Plugins.AutoFit] // 插件形式引入多选表格
      });

    var  search = new Search({
        store : store,
        gridCfg : gridCfg
      }),
      grid = search.get('grid');

    // function addFunction(){
    //   var newData = {isNew : true}; //标志是新增加的记录
    //   editing.add(newData,'name'); //添加记录后，直接编辑
    // }

    //删除操作
    function delFunction(){
      var selections = grid.getSelection();
      delItems(selections);
    }

    function delItems(items){
      var ids = [];
      BUI.each(items,function(item){
        ids.push(item.id);
      });

      if(ids.length){
        BUI.Message.Confirm('确认要删除选中的记录么？',function(){
          store.save('remove',{ids : ids});
        },'question');
      }
    }

    //监听事件，删除一条记录
    grid.on('cellclick',function(ev){
      var sender = $(ev.domTarget); //点击的Dom
      if(sender.hasClass('btn-del')){
        var record = ev.record;
        delItems([record]);
      }
    });
  });

</script>

</body>
</html>  
